<template>
	<div class="list-container">
		<div class="data-list-container flex-container">

			<div class="data-list-table">
				<el-table :data="dataList">

					<el-table-column label="Imei" width="160" prop="device_id" >
						<template slot-scope="scope">
							{{ scope.row.device_uid }}
						</template>
					</el-table-column>
					<el-table-column label="设备Id" width="300" prop="device_id" >
						<template slot-scope="scope">
							{{ scope.row.outer_device_id }}
						</template>
					</el-table-column>
					<el-table-column label="Data">
						<template slot-scope="scope">
							<el-tooltip popper-class="tooltip-item" effect="dark" placement="top">
								<template slot="content">
									<div style="max-width: 800px; width: initial">
										{{scope.row.data}}
									</div>
								</template>

								<div style="width: 100%">
									{{scope.row.data }}
								</div>
							</el-tooltip>

						</template>
					</el-table-column>
					<el-table-column label="Time" width="170" >
						<template slot-scope="scope">
							{{scope.row.create_time | timeFormat}}
						</template>
					</el-table-column>
				</el-table>
			</div>

			<div class="flex-footer h-80">
				<div class="flex-footer-content">
					<el-row>
						<el-col :span="8" class="pt-6">
						</el-col>
						<el-col :span="16" class="text-center" v-if="total > 0" style="padding-top: 20px">
							<el-pagination
									@current-change="pageChange"
									:current-page="currentPage"
									:page-size="pageSize"
									layout="total, prev, pager, next, jumper"
									:total="total">
							</el-pagination>
						</el-col>
						<!--<el-col :span="8" class="text-center" v-if="total > 0"></el-col>-->
					</el-row>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">

	import Core from 'core/core'

	export default {
		data() {
			return {
			    space: "20013",
				Core: Core,
				searchForm: {
					device_id: '',

				},
				dataList: [],
				// 分页配置
				currentPage: 1,
				total: 0,
				pageSize: 20,
			}
		},
		mounted: function () {
			this.getReportList();
		},
		watch: {

		},
		methods: {
		    search() {
		        console.log('search')
			},

            pageChange(val) {
		        this.currentPage = 1;
		        this.getReportList();
			},

			getReportList() {
                let space = '20013';
                let page = this.currentPage;
                let data = {
                    'space': space,
                   	'type': '',
                    'page': page,
                    'token': Core.Data.getToken()
                };
                let requestUrl = "http://api.ajaiot.com/oc/report/list";
                Core.Api.doPost(requestUrl, data).then(res => {
                    this.total = res.count;
                    this.dataList = res.report_list;
                });
			},
		}
	}
</script>

<style scoped lang="scss">
	.list-container {
		height: 100%;
		.data-list-container {
			height: 100%;
			.search-row {
				margin: 0;
				padding: 15px 30px;
				background: #fff;
				.el-form--inline .el-form-item {
					margin-bottom: 0;
				}
				.el-form-item__label {
					padding-right: 10px;
					font-size: 12px;
				}
				.el-form-item__content {
					.el-input {
						width: 175px;
					}
				}
			}

			.data-list-table {
				background: white;
				padding: 0 20px;
				position: relative;
				box-flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				flex: 1;
				-webkit-flex: 1;
				overflow: auto;
				.all-select-holder {
					line-height: 30px;
					position: absolute;
					left: 10px;
					z-index: 10;
				}
			}
			.flex-footer {
				border-top: 1px solid #E0E7EF;
			}
			.flex-footer.h-80 {
				height: 80px;
			}

		}

		.data-div {
			word-break: break-all;
			white-space: normal;
		}
		.tooltip-item {
			width: 600px;
		}
	}
</style>
